<template>
  <view class="container">
    <view class="coupon-list">
      <view :key="index" class="coupon-item" v-for="(item,index) in couponList">
        <view class="hidden-box">
          <view class="code-tit">验证码</view>
          <view class="code-num">{{item.code}}</view>
          <view class="qrcode">
            <canvas :canvas-id="'couponQrcode'+index" :style="{width:qrcode_w+'px', height:qrcode_w+'px'}"></canvas>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  const qrCode = require('../../../libs/weapp-qrcode.js');
  export default {
    name: "qrcode",
    data() {
      return {
        couponList: [
          {
            name: "购物券",
            code: "xyz0900100200",
            spread: true,
          }
        ],
        qrcode_w: uni.upx2px(240)
      }
    },
    onLoad() {
      this.couponQrCode(this.couponList[0].code, "couponQrcode0")
    },
    methods: {
      // 二维码生成工具
      couponQrCode(text, canvasId) {
        new qrCode(canvasId, {
          text: text,
          width: this.qrcode_w,
          height: this.qrcode_w,
          colorDark: "#333333",
          colorLight: "#FFFFFF",
          correctLevel: qrCode.CorrectLevel.H
        })
      }
    }
  }
</script>

<style lang="css" scoped>
  @import "qrcode.css";
</style>
